<template>
	<view class="clients">
		<view class="item" v-for="item  in  clients" :key="item.id">
			<view class="desc">
				<view class="name">
					{{item.name}}
				</view>
				<view class="sex">
					<span :style="{color:(item.sex === 1 ? '#3779c8':'#c83b65')}">{{item.sex===1?'男':'女'}}</span> <span
						style="margin: 0 10rpx;">{{item.age}}周岁</span>
					<span>{{item.mobile}}</span>
				</view>
			</view>
			<view>
				<button class="btn" v-if="act==='select'" @click="selectClient(item.id)">选择</button>
				<button class="btn" v-else @click="removeClient(item.id)">移除</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRaw
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const app = getApp()
	// 创建页面控制变量
	const act = ref('')
	// 服务对象
	const clients = ref()
	// 获取页面参数
	onLoad((options) => {
		act.value = options.act
		if (options.act === 'select') {
			uni.setNavigationBarTitle({
				title: '请选择服务对象'
			})
		} else {
			uni.setNavigationBarTitle({
				title: '服务对象管理'
			})
		}
		// 获取数据
		const app = getApp()
		app.globalData.utils.request({
			url: "/User/clients",
			success: (res) => {
				console.log(res, 'res')
				clients.value = res.data.clients
			}
		})
	})
	// 选择服务人员
	const selectClient = (id) => {
		const clientsData = toRaw(clients.value).filter(item => item.id === id)[0]
		console.log(clientsData, 'clientsData123')
		// 触发全局函数
		uni.$emit('clientChange', clientsData)
		uni.navigateBack()
	}
	// 移除服务人员

	const removeClient = () => {
		console.log('456')
	}
</script>

<style lang="scss">
	.clients {
		padding: 20rpx;

		.item {
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 20rpx;
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			padding: 20rpx;

			.desc {
				display: flex;
				flex-direction: column;
				align-content: center;
				justify-content: start;
				color: #000;
				font-size: 48rpx;

				.name {
					font-size: 32rpx;
					font-weight: 600;
				}
			}
		}

		.btn {
			height: 70rpx;
			line-height: 70rpx;
			background-color: transparent;
			color: #4fc81b;
			border: 1rpx solid #4fc81b;
		}
	}
</style>